import React, { useState } from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import {ReactQueryDevtools} from 'react-query/devtools'
import { NavBar } from './components/NavBar'
import { People } from './components/People'
import Planets from './components/Planets'

export type PageVal = 'planets' | 'people'

const queryClient = new QueryClient()

function App() {
  const [page, setPage] = useState<PageVal>('planets')
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <h1>Star Wars Info</h1>
        <NavBar setPage={setPage} />
        <div className="content">
          {page === 'planets' ? <Planets /> : <People />}
        </div>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </div>
  )
}

export default App
